{% extends 'index.html' %}
{% load custom_tag %}

{% block page-title %}
nginx配置
{% endblock %}
{% block page-content %}

<div class="row">
     <div class="col-sm-6 col-lg-3">
        <div class="panel" style="height: 492px;">
            <div class="panel-heading">
                <h3 class="panel-title">主机列表</h3>
            </div>
            <div  class="panel-body " style="overflow: auto" >

                      <input style="margin-bottom: 5px" type="text" oninput="SearchHost(this)" id="host_search" class="form-control" placeholder="查找主机...">

                <div id="host_list" style="">
                    <div style="margin-bottom:0;" class="list-group bg-trans">
                     {% for host in all_hosts %}

                            {% if host.id == current_host_id %}
                                <a class="list-group-item active" host_id="{{ host.id }}" href="/host/site/?host_id={{host.id }}">{{ host.hostname }}({{ host.ip_addr }})</a>
                            {% else %}
                                <a class="list-group-item" host_id="{{ host.id }}" href="/host/site/?host_id={{host.id }}" >{{ host.hostname }}({{ host.ip_addr }})</a>
                            {% endif %}
                     {% endfor %}
                     </div>
                </div>




            </div>
        </div>
     </div>

    <div class="col-sm-6 col-lg-9">
        <div class="panel">
             <div class="panel-heading">
                <h3 class="panel-title">主机信息</h3>
            </div>
            <div class="panel-body" >

                {% for host in all_hosts %}

                    {% if host.id == current_host_id %}
                    <div class="row" >
                        <label class="col-md-2 control-label">主机名(IP)</label>
                        <div  class="col-md-9 ">
                            <b>{{ host }}</b>
                        </div>
                    </div>
                    <div class="row" >
                        <label class="col-md-2 control-label">操作系统</label>
                        <div  class="col-md-9 ">
                            <b>{{ host.system_type }}</b>
                        </div>
                    </div>
                    <div class="row" >
                        <label class="col-md-2 control-label">端口</label>
                        <div  class="col-md-9 ">
                            <b>{{ host.port }}</b>
                        </div>
                    </div>

                    <div class="row" >
                        <label class="col-md-2 control-label">所在机房</label>
                        <div  class="col-md-9 ">
                            <b>{{ host.idc }}</b>
                        </div>
                    </div>
                    <div class="row" >
                        <label class="col-md-2 control-label">主机状态</label>
                        <div  class="col-md-9 ">
                            {% if host.enabled %}
                            <span class="badge badge-success">已启用</span>
                            {% else %}
                            <span class="badge badge-danger">已停用</span>
                            {% endif %}
                        </div>
                    </div>


                    <div class="row" >
                        <label class="col-md-2 control-label">已绑定远程用户信息</label>
                        <div  class="col-md-9 ">
                            {% for bind_host in host.bindhosts_set.select_related %}
                            <div><b>{{ bind_host.host_user.username }}
                                -->属组:{% for group in  bind_host.hostgroups_set.select_related %}
                                    <span class="badge badge-info">{{ group.name }}</span>{% endfor %}</b>
                                {% if not bind_host.enabled %}<span class="badge badge-danger">此账户已禁用</span>{% endif %}
                            </div>

                            {% endfor %}
                        </div>
                    </div>


                    <div class="row" >
                        <hr/>
                        <label class="col-md-2 control-label panel-title">本机所有站点配置</label>

                        <table class="table table-hover">
                            <tr>
                                <th>nginx配置文件</th>
                                <th>编辑</th>

                            </tr>
                            {% for conf in nginx_conf %}
                            <tr>
                                <td>{{ conf }}</td>
                                <td ><a href="#" onclick="EditConf(this,'{{ conf }}','{{ current_host_id }}')" class="btn-link">编辑</a></td>

                            </tr>
                            {% endfor %}

                        </table>
                        <div class="pagination pull-right ">
                            {% pagenator2 nginx_conf 'host_id' current_host_id %}
                        </div>
                    </div>




                    {% endif %}

                {% endfor %}

            </div>
        </div>
    </div>

</div>
{% endblock %}

{% block bottom-js %}
<script type="text/javascript">

    $(document).ready(function(){

        host_list = {};
        $("#host_list div").children().each(function(index){

          host_list[$(this).attr("host_id")] = $(this).text();
        });

        $("#host_list a[host_id='" + "{{ current_host_id }}" + "']").prependTo("#host_list div");
        console.log($("#host_list active")[0])


    });//end doc ready

    function SearchHost(ele){

        var search_str = $(ele).val()
        var host_list_html ='' ;

        $.each(host_list,function(host_id,val){
            if (val.indexOf(search_str) >-1){
                console.log(val);
                var html_row = "<a class='list-group-item' host_id='" + host_id + "' href='/host/site/?host_id=" + host_id + "' > " + val + "</a>";
                host_list_html += html_row ;

            }

        });//end each

        $("#host_list").html(host_list_html);
    }
    function EditConf(this_ele,conf_path,host_id){
        //console.log(session_id);
        $.ajax({
            type: 'GET',
            url: '/host/nginx_edit/',
            data: {conf_path:conf_path,host_id:host_id},
            success: function (data) {
                console.log(data);
                data=JSON.parse(data)
                var html_ele="";
                html_ele+="<div><form role='form' id='nginxForm' method='POST' action='#'><input type='hidden' name='host_id' value='"+host_id+"' /><input type='hidden' name='conf_path' style='width:350px;background-color:black;' readonly='true' value='"+conf_path+"'><br/><textarea spellcheck='false' name='conf' style='width:800px;height:300px;background-color:black;'>"+data.conf+"</textarea><br /></form></div>";
                $("#nginx_edit_content").html(html_ele);
                //var tr_ele = $(this_ele).parent().parent();
                //var hostname = tr_ele.children("td[data-label='hostname']").text();
                //var ip_addr = tr_ele.children("td[data-label='ip_addr']").text();
                $("#modal-hostname span").text(data.hostname + "("+ data.ip +")");
                $("#modal-conf-path span").text(conf_path);
            }
            
        });
        $("#nginx-edit-modal").modal('show');


    }

    function NginxSave(this_ele){
        $.ajax({
           type: 'POST',
            url: '/host/nginx_edit/',
            data: $('#nginxForm').serialize(),
            success: function (data) {
                if (data != 0){

                    alert('nginx语法错误。')
                }else{
                    $("#nginx-edit-modal").modal('hide');
                }
            }
        });
    }
    function NginxCancel(this_ele){
        $.ajax({
           type: 'POST',
            url: '/host/nginx_cancel/',
            data: $('#nginxForm').serialize(),
            success: function (data) {
                if (data != 0){
                    //EditConf();
                    alert('nginx语法错误。')
                }else{
                    $("#nginx-edit-modal").modal('hide');
                }
            }
        });
    }


</script>
{% endblock %}



